<template>

  <div class="product-add">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="200px">
      <!--店员修改-->
      <div class="common-form">配送员修改</div>
      <el-form-item label="所属小区">
        <el-select v-model="form.village_id" placeholder="请选择">
          <el-option v-for="(item,index) in villageList" :key="index" :label="item.name"
                     :value="item.id"></el-option>
        </el-select>
      
      </el-form-item>
      <el-form-item label="配送员" prop="username" :rules="[{required: true,message: ' '}]">
        <el-input class="max-w460" v-model="form.username" placeholder="请输入配送员姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile" :rules="[{required: true,message: ' '}]">
        <el-input class="max-w460" v-model="form.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input class="max-w460" type="password" v-model="form.password" placeholder="请输入密码"></el-input>
      </el-form-item>

      <el-form-item label="状态">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--提交-->
      <div class="common-button-wrapper">
        <el-button size="small" type="info" @click="cancelFunc">取消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button>
      </div>
    </el-form>

    <!--添加-->
    <GetUser :is_open="open_add" @close="closeDialogFunc($event, 'add')"></GetUser>

  </div>
</template>

<script>
import shopperApi from '@/api/shopper.js';
import GetUser from '@/components/user/GetUser.vue';
import {formatModel} from '@/utils/base.js'

export default {
  components: {
    /*编辑组件*/
    GetUser
  },
  data() {
    return {
      /*切换菜单*/
      // activeIndex: '1',
      /*form表单数据*/
      form: {
        id: '',
        status: '',
        username: '',
        mobile: '',
        village_id:'',
        password:''
 
      },
      villageList:[],
      /*是否打开添加弹窗*/
      open_add: false,
      storeList: [],
      loading: false,
    };
  },
  created() {

    this.form.id = this.$route.query.id;

    this.getParams()

    this.getVillageList()
  },

  methods: {
    getParams() {
      let self = this;
      // 取到路由带过来的参数

      shopperApi.ShopperDetail({
        id: self.form.id
      }, true)
        .then(data => {
          // 将数据放在当前组件的数据内
          self.form = formatModel(self.form, data.data.model);
          self.form.status = data.data.model.status.value;
          self.storeList = data.data.store_list;
        })
        .catch(error => {

        });

    },

    
      /*获取小区列表*/
      getVillageList() {
        let self = this;
        let Params = [];
        self.loading = true;
        shopperApi.villageLists(Params, true)
          .then(res => {
            self.loading = false;
      
            self.villageList = res.data.list;
          })
          .catch(error => {
            self.loading = false;
          });
      },

    onSubmit() {
      let self = this;
      let form = self.form;
      self.$refs.form.validate((valid) => {
        if (valid) {
          self.loading = true;
          shopperApi.editShopper(form, true)
            .then(data => {
              self.$message({
                message: '修改成功',
                type: 'success'
              });
              self.$router.push('/shopper/shopper/index');
            })
            .catch(error => {
              self.loading = true;
            });
        }
      });
    },

    /*取消*/
    cancelFunc() {
      this.$router.back(-1);
    }

  }

};
</script>

<style lang="scss" scoped>
.basic-setting-content {
}

.product-add {
  padding-bottom: 50px;
}
</style>
